<template>
  <div align="center">
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "gaode",
  data() {
    return {
      pLocation: { plLongitude: "", plLatitude: "" } //初始化 map 对象
    };
  },
  methods: {
    initMap() {
      let that = this;
      AMapLoader.load({
        key: "af7d12153c62de85bda3e26781c645da", //此处填入我们注册账号后获取的Key
        version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""] //需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
      .then(AMap => {
          let geolocation, map;
          map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [104.06, 30.67] //初始化地图中心点位置
          });
          //获取当前位置
          AMap.plugin("AMap.Geolocation", function () {
            geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, //是否使用高精度定位，默认:true
              timeout: 10000, //超过10秒后停止定位，默认：无穷大
              maximumAge: 0, //定位结果缓存0毫秒，默认：0
              convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              showButton: true, //显示定位按钮，默认：true
              buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
              buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
              showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
              panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            map.addControl(geolocation);

            geolocation.getCurrentPosition((status, result) => {
              if (status === "complete") {
                console.log("定位成功", result);
              } else {
                console.log("定位失败", result);
              }
              //标记mark地点
            });
            map.on("click", showInfoClick);

            function showInfoClick(e) {
              map.clearMap(); //清理地图
              that.pLocation.plLatitude = e.lnglat.getLng(); //获取经度
              that.pLocation.plLongitude = e.lnglat.getLat(); //获取纬度
              // console.log(that.pLocation.plLatitude);
              // console.log(that.pLocation.plLongitude);
              sessionStorage.setItem("plLatitude",that.pLocation.plLatitude);
              sessionStorage.setItem("plLongitude",that.pLocation.plLongitude);
              //marker点
              let marker = new AMap.Marker({
                map: map,
                position: [
                  that.pLocation.plLatitude,
                  that.pLocation.plLongitude
                ],
                icon: new AMap.Icon({
                  image:
                    "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                  size: new AMap.Size(56, 56), //图标所处区域大小
                  imageSize: new AMap.Size(22, 32) //图标大小
                }),
                offset: new AMap.Pixel(-25, -19)
              });
            }
          });
        })
      .catch(e => {
          console.log(e);
        });
    }
  },
  created() {
    this.initMap();
  },
  mounted() {
    //DOM初始化完成进行地图初始化
  }

};
</script>
<style scoped>
#container {
  width: 700px;
  height: 400px;
}
</style>
